// 模拟vue2 使用 Object.defineProperty 来进行 set get拦截
const model = {
  name: "tiansongtao",
};

function defineReactive(obj, key, value) {
  Object.defineProperty(model, key, {
    set(str) {
      console.log(`Object.defineProperty set ${str}`);
      value = str;
    },
    get() {
      console.log(`Object.defineProperty get ${value}`);
      return value;
    },
  });
}
defineReactive(model, "name", model.value);
model.name = "ddd";
model.name;

// vue3 proxy
function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      console.log("tiansongtao proxy get", key);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      console.log(`tiansongtao proxy set ${key}:${value}`);
      return Reflect.set(target, key, value, receiver);
    },
  });
}

const r = reactive({
  name: "yancan",
});
r.name;
r.name = "yan";
